/*!
 _________
|    🍿   |\
| ~~~~~~~ |_\
| loading |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/
@import './_prefix.less';
@keyframes ani-spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(359deg);
    }
}
@keyframes hourglass {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-180deg);
    }
}
.@{prefix}-spin {
    animation: ani-spin 2s infinite linear;
    display: inline-block;
}
.@{prefix}-pulse {
    animation: ani-spin 1s infinite steps(8);
    display: inline-block;
}
.@{prefix}-hourglass {
    display: block;
    position: relative;
    animation: hourglass 1s infinite ease;
}
.@{prefix}-timer {
    width: 48rpx;
    height: 48rpx;
    margin: 0 auto;
    text-align: center;
    background-color: transparent;
    box-shadow: inset 0 0 0 4rpx currentColor;
    border-radius: 50%;
    position: relative;
    &::after,
    &::before {
        content: '';
        height: 4rpx;
        position: absolute;
        top: 22rpx;
        left: 22rpx;
        background-color: currentColor;
        transform-origin: 2rpx 2rpx;
    }
    &::before {
        width: 16rpx;
        animation: hrhand 8s linear infinite;
    }
    &::after {
        width: 20rpx;
        animation: minhand 2s linear infinite;
    }
    @keyframes hrhand {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes minhand {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-typing-loading {
    width: 12rpx;
    height: 12rpx;
    line-height: 12rpx;
    position: relative;
    left: -24rpx;
    border-radius: 50%;
    animation: typing 1680ms linear infinite alternate;
    margin: 0 auto;
    text-align: center;
    @keyframes typing {
        0% {
            background-color: currentColor;
            box-shadow: 24rpx 0 0 0 rgba(255, 255, 255, 0.2),
                48rpx 0 0 0 rgba(255, 255, 255, 0.2);
        }

        25% {
            background-color: rgba(255, 255, 255, 0.4);
            box-shadow: 24rpx 0 0 0 currentColor,
                48rpx 0 0 0 rgba(255, 255, 255, 0.2);
        }

        75% {
            background-color: rgba(255, 255, 255, 0.4);
            box-shadow: 24rpx 0 0 0 rgba(255, 255, 255, 0.2),
                48rpx 0 0 0 currentColor;
        }
    }
}
.@{prefix}-ocation-indicator {
    position: relative;
    left: -18rpx;
    &::before,
    &::after {
        content: '';
        position: absolute;
    }
    &::before {
        width: 40rpx;
        height: 40rpx;
        border-radius: 100% 100% 100% 0;
        box-shadow: 0 0 0 4rpx currentColor;
        animation: mapping 1s linear infinite;
        transform: rotate(-46deg);
    }
    &::after {
        width: 60rpx;
        height: 20rpx;
        border-radius: 100%;
        top: 48rpx;
        left: 104rpx;
        background-color: currentColor;
        opacity: 0.2;
    }
    @keyframes mapping {
        0% {
            top: 0;
        }

        50% {
            top: -10rpx;
        }

        100% {
            top: 0;
        }
    }
}
.@{prefix}-dashboard-loading {
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto;
    border: 4rpx currentColor solid;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    &::after,
    &::before {
        content: '';
        position: absolute;
    }
    &::before {
        width: 64rpx;
        height: 20rpx;
        background-color: currentColor;
        top: 40rpx;
        left: -4rpx;
    }
    &::after {
        width: 28rpx;
        height: 4rpx;
        top: 40rpx;
        transform-origin: 2rpx 2rpx;
        background-color: currentColor;
        animation: dashboard-hand 2s linear infinite alternate;
    }
    @keyframes dashboard-hand {
        0% {
            transform: rotate(-160deg);
        }

        100% {
            transform: rotate(-20deg);
        }
    }
}
.@{prefix}-battery-loading {
    width: 56rpx;
    height: 28rpx;
    border: 2rpx solid currentColor;
    border-radius: 4rpx;
    position: relative;
    animation: charge 5s linear infinite;
    margin: 0 auto;
    &::after {
        content: '';
        width: 4rpx;
        height: 14rpx;
        background-color: currentColor;
        border-radius: 0 2rpx 2rpx 0;
        position: absolute;
        top: erpx;
        right: -8rpx;
    }
    @keyframes charge {
        0% {
            box-shadow: inset 0 0 0 currentColor;
        }

        100% {
            box-shadow: inset 60rpx 0 0 currentColor;
        }
    }
}
.@{prefix}-magnifier-loading {
    width: 40rpx;
    height: 40rpx;
    box-shadow: 0 0 0 2rpx currentColor;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    animation: magnify 1s linear infinite alternate;
    &::before,
    &::after {
        position: absolute;
    }
    &::before {
        content: attr(data-text);
        font-size: 18rpx;
        left: 6rpx;
        top: 8rpx;
        text-align: center;
    }
    &::after {
        content: '';
        width: 4rpx;
        height: 16rpx;
        background-color: currentColor;
        bottom: -12rpx;
        left: 40rpx;
        border-radius: 4rpx;
        transform: rotate(-45deg);
    }
    @keyframes magnify {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.5);
        }
    }
}
.@{prefix}-help-loading {
    width: 60rpx;
    height: 60rpx;
    border: 2rpx solid currentColor;
    border-radius: 50%;
    animation: rotation 1s ease-in-out infinite;
    margin: 0 auto;
    &::after {
        content: '';
        width: 10rpx;
        height: 10rpx;
        position: absolute;
        background-color: currentColor;
        border-radius: 100%;
    }
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-cloud-loading {
    margin: 0 70rpx;
    width: 8rpx;
    height: 20rpx;
    opacity: 0.5;
    position: relative;
    box-shadow: 12rpx 0 0 0 currentColor, 24rpx 0 0 0 currentColor,
        36rpx 0 0 0 currentColor, 248rpx 0 0 0 currentColor,
        60rpx 0 0 0 currentColor, 72rpx 0 0 0 currentColor;
    animation: rain 1s linear infinite alternate;
    &::after {
        content: '';
        width: 80rpx;
        height: 20rpx;
        background-color: currentColor;
        position: absolute;
        top: 0;
        opacity: 1;
        -webkit-animation: line-flow 2s linear infinite reverse;
        -moz-animation: line-flow 2s linear infinite reverse;
        animation: line-flow 2s linear infinite reverse;
    }
    @keyframes rain {
        0% {
            box-shadow: 12rpx 0 0 0 currentColor,
                24rpx 0 0 0 rgba(255, 255, 255, 0.9),
                36rpx 0 0 0 rgba(255, 255, 255, 0.7),
                48rpx 0 0 0 rgba(255, 255, 255, 0.6),
                60rpx 0 0 0 rgba(255, 255, 255, 0.3),
                72rpx 0 0 0 rgba(255, 255, 255, 0.2);
        }
        100% {
            box-shadow: 12rpx 0 0 0 rgba(255, 255, 255, 0.2),
                24rpx 0 0 0 rgba(29, 19, 19, 0.3),
                36rpx 0 0 0 rgba(255, 255, 255, 0.6),
                48rpx 0 0 0 rgba(255, 255, 255, 0.7),
                60rpx 0 0 0 rgba(255, 255, 255, 0.9), 72rpx 0 0 0 currentColor;
            opacity: 1k;
        }
    }
    @keyframes line-flow {
        0% {
            width: 0;
        }
        100% {
            width: 80rpx;
        }
    }
}
.@{prefix}-eye-loading {
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 60rpx 0 0 0 rgba(255, 255, 255, 0.8);
    position: relative;
    margin: 0 70rpx;
    &::after {
        content: '';
        background-color: currentColor;
        width: 20rpx;
        height: 20rpx;
        box-shadow: 60rpx 0 0 0 currentColor;
        border-radius: 50%;
        position: absolute;
        left: 18rpx;
        top: 16rpx;
        animation: eyeball 2s linear infinite alternate;
    }
    @keyframes eyeball {
        0% {
            left: 18rpx;
        }

        100% {
            left: 2rpx;
        }
    }
}
.@{prefix}-coffeecup-loading {
    width: 40rpx;
    height: 48rpx;
    border: 2rpx solid currentColor;
    border-radius: 0 0 10rpx 10rpx;
    position: relative;
    margin: 0 auto;
    &::after,
    &::before {
        content: '';
        position: absolute;
    }
    &::before {
        width: 2rpx;
        height: 12rpx;
        background-color: currentColor;
        top: -20rpx;
        left: 8px;
        box-shadow: 10rpx 0 0 0 currentColor, 10rpx -10rpx 0 0 currentColor,
            20rpx 0 0 0 currentColor;
        animation: steam 1s linear infinite alternate;
    }
    &::after {
        width: 10rpx;
        height: 24rpx;
        border: 2rp solid currentColor;
        border-left: none;
        border-radius: 0 40rpx 40rpx 0;
        left: 40rpx;
    }
    @keyframes steam {
        0% {
            height: 0;
        }
        100% {
            height: 12px;
        }
    }
}
.@{prefix}-square-loading {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid currentColor;
    margin: 0 auto;
    position: relative;
    animation: fill-color 5s linear infinite;
    &::after {
        content: '';
        width: 8rpx;
        height: 8rpx;
        background-color: currentColor;
        position: absolute;
        top: -16rpx;
        left: 0;
        animation: square-check 1s ease-in-out infinite;
    }
    @keyframes fill-color {
        0% {
            box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.1);
        }
        100% {
            box-shadow: inset 0 -40rpx 0 0 currentColor;
        }
    }
    @keyframes square-check {
        25% {
            left: 44rpx;
            top: -16rpx;
        }
        50% {
            left: 44rpx;
            top: 44rpx;
        }
        75% {
            left: -18rpx;
            top: 44rpx;
        }
        100% {
            left: -18rpx;
            top: -14rpx;
        }
    }
}
.@{prefix}-circle-loading {
    margin: 0 auto;
    width: 16rpx;
    height: 16rpx;
    position: relative;
    background-color: currentColor;
    box-shadow: -28rpx 0 0 currentColor;
    opacity: 0.5;
    border-radius: 50%;
    animation: circle-classic 1s ease-in-out infinite alternate;
    @keyframes circle-classic {
        0% {
            opacity: 0.1;
            transform: rotate(0deg) scale(0.5);
        }
        100% {
            opacity: 1;
            transform: rotate(360deg) scale(1.2);
        }
    }
}
.@{prefix}-circle-side-loading {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    animation: circle infinite 0.75s linear;
    border: 4rpx solid currentColor;
    border-top-color: rgba(0, 0, 0, 0.2);
    border-right-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    margin: 0 auto;
    @keyframes circle {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-square-jelly-loading {
    width: 64rpx;
    height: 64rpx;
    position: relative;
    font-size: 0;
    margin: 0 auto;
    &::before,
    &::after {
        content: '';
        width: 100%;
        position: absolute;
        left: 0;
        border: 0 solid currentColor;
    }
    &::before {
        height: 100%;
        border-radius: 10%;
        top: -25%;
        background-color: currentColor;
        border: 0 solid currentColor;
        z-index: 1;
        animation: square-jelly-animate 0.6s -0.1s linear infinite;
    }
    &::after {
        height: 10%;
        background: #000;
        border-radius: 50%;
        opacity: 0.2;
        bottom: -9%;
        animation: square-jelly-shadow 0.6s -0.1s linear infinite;
    }
    @keyframes square-jelly-animate {
        17% {
            border-bottom-right-radius: 10%;
        }
        25% {
            transform: translateY(25%) rotate(22.5deg);
        }
        50% {
            border-bottom-right-radius: 100%;
            transform: translateY(50%) scale(1, 0.9) rotate(45deg);
        }
        75% {
            transform: translateY(25%) rotate(67.5deg);
        }
        100% {
            transform: translateY(0) rotate(90deg);
        }
    }
    @keyframes square-jelly-shadow {
        50% {
            transform: scale(1.25, 1);
        }
    }
}
.@{prefix}-cog-loading {
    position: relative;
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto;
    font-size: 0;
    color: currentColor;
    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: transparent;
        border-style: dashed;
        border-width: 8rpx;
        border-radius: 100%;
        animation: cog-rotate 4s linear infinite;
    }
    &::after {
        content: '';
        position: absolute;
        top: 4rpx;
        left: 4rpx;
        width: 100%;
        height: 100%;
        border: 4rpx solid currentColor;
        border-radius: 100%;
    }
    @keyframes cog-rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-square-circle-loading {
    position: relative;
    width: 32rpx;
    height: 32rpx;
    margin: 0 auto;
    transform: translate(-50%, 0);
    &::before,
    &::after {
        content: '';
        position: absolute;
    }
    &::before {
        width: 64rpx;
        height: 64rpx;
        left: 0;
        background-color: currentColor;
        animation: square-circle 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
    }
    &::after {
        width: 300%;
        height: 0.3em;
        left: -0.6em;
        bottom: -1.8em;
        border-radius: 50%;
        background-color: #322b27;
        opacity: 0.6;
        animation: square-circle-shadow 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite
            normal;
    }
    @keyframes square-circle {
        50% {
            border-radius: 50%;
            transform: scale(0.5) rotate(360deg);
            background-color: currentColor;
        }
        100% {
            transform: scale(1) rotate(720deg);
            background-color: currentColor;
        }
    }
    @keyframes square-circle-shadow {
        50% {
            transform: scale(0.5);
            background-color: #322b27;
        }
    }
}
.@{prefix}-ball-scale-loading {
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto;
    border-radius: 100%;
    background-color: currentColor;
    animation: ball-scale infinite linear 0.75s;
    @keyframes ball-scale {
        0% {
            transform: scale(0.1);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
}
.@{prefix}-rectangle-loading {
    position: relative;
    width: 10rpx;
    height: 30rpx;
    margin: 0 auto;
    background-color: currentColor;
    animation: rectangle infinite 1s ease-in-out -0.2s;
    &::before,
    &::after {
        content: '';
        width: 10rpx;
        height: 30rpx;
        position: absolute;
        background-color: currentColor;
    }
    &::before {
        left: -20rpx;
        animation: rectangle infinite 1s ease-in-out -0.4s;
    }
    &::after {
        right: -20rpx;
        animation: rectangle infinite 1s ease-in-out;
    }
    @keyframes rectangle {
        0%,
        80%,
        100% {
            height: 35rpx;
            box-shadow: 0 0 currentColor;
        }
        40% {
            height: 45rpx;
            box-shadow: 0 -20rpx currentColor;
        }
    }
}
.@{prefix}-heart-loading {
    width: 129rpx;
    height: 90rpx;
    margin: 0 auto;
    padding-top: 22rpx;
    text {
        float: left;
        width: 10rpx;
        height: 10rpx;
        border-radius: 10rpx;
        margin-right: 5rpx;
        display: list-item;
        list-style: none;
        text-align: -webkit-match-parent;
        &:nth-child(1) {
            background-color: var(--red);
            animation: love1 4s infinite;
        }
        &:nth-child(2) {
            background-color: var(--orange);
            animation: love2 4s infinite;
            animation-delay: 0.15s;
        }
        &:nth-child(3) {
            background-color: var(--yellow);
            animation: love3 4s infinite;
            animation-delay: 0.3s;
        }
        &:nth-child(4) {
            background-color: var(--green);
            animation: love4 4s infinite;
            animation-delay: 0.45s;
        }
        &:nth-child(5) {
            background-color: var(--blue);
            animation: love5 4s infinite;
            animation-delay: 0.6s;
        }
        &:nth-child(6) {
            background-color: var(--purple);
            animation: love4 4s infinite;
            animation-delay: 0.75s;
        }
        &:nth-child(7) {
            background-color: var(--yellow);
            animation: love3 4s infinite;
            animation-delay: 0.9s;
        }
        &:nth-child(8) {
            background-color: var(--orange);
            animation: love2 4s infinite;
            animation-delay: 1.05s;
        }
        &:nth-child(9) {
            background-color: var(--red);
            animation: love1 4s infinite;
            animation-delay: 1.2s;
        }
    }
    @keyframes love1 {
        30%,
        50% {
            height: 30rpx;
            transform: translateY(-15rpx);
        }
        75%,
        100% {
            height: 10rpx;
            transform: translateY(0);
        }
    }
    @keyframes love2 {
        30%,
        50% {
            height: 66rpx;
            transform: translateY(-33rpx);
        }
        75%,
        100% {
            height: 10rpx;
            transform: translateY(0);
        }
    }
    @keyframes love3 {
        30%,
        50% {
            height: 90rpx;
            transform: translateY(-35rpx);
        }
        75%,
        100% {
            height: 10rpx;
            transform: translateY(0);
        }
    }
    @keyframes love4 {
        30%,
        50% {
            height: 90rpx;
            transform: translateY(-35rpx);
        }
        75%,
        100% {
            height: 10rpx;
            transform: translateY(0);
        }
    }
    @keyframes love5 {
        30%,
        50% {
            height: 85rpx;
            transform: translateY(-22.5rpx);
        }
        75%,
        100% {
            height: 10rpx;
            transform: translateY(0);
        }
    }
}
.@{prefix}-bar1-loading {
    position: relative;
    width: 150rpx;
    height: 20rpx;
    top: calc(~'50% - 10rpx');
    left: calc(~'50% - 75rpx');
    &::before,
    &::after {
        content: '';
        position: absolute;
    }
    &::before {
        background-color: #fff;
        top: -5rpx;
        left: 0;
        height: 30rpx;
        width: 0;
        z-index: 0;
        opacity: 1;
        transform-origin: 100% 0%;
        animation: bar1 10s ease-in-out infinite;
    }
    &::after {
        content: attr(data-text);
        color: #fff;
        width: 100%;
        height: 20rpx;
        line-height: 20rpx;
        left: 0;
        top: 0;
        font-weight: 200;
        font-size: 16rpx;
        background-color: inherit;
        z-index: 1;
    }
    @keyframes bar1 {
        0% {
            width: 0px;
        }
        70% {
            width: 100%;
            opacity: 1;
        }
        90% {
            opacity: 0;
            width: 100%;
        }
        100% {
            opacity: 0;
            width: 0px;
        }
    }
}
.@{prefix}-bar2-loading {
    position: relative;
    width: 150rpx;
    height: 20rpx;
    top: calc(~'50% - 10rpx');
    left: calc(~'50% - 75rpx');
    background-color: rgba(255, 255, 255, 0.2);
    &::before,
    &::after {
        content: '';
        position: absolute;
    }
    &::before {
        height: 20rpx;
        width: 0;
        top: 0;
        left: 0;
        z-index: 0;
        background-color: currentColor;
        opacity: 1;
        transform-origin: 100% 0%;
        animation: bar2 10s ease-in-out infinite;
    }
    &::after {
        content: attr(data-text);
        width: 100%;
        height: 20rpx;
        line-height: 20rpx;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        font-weight: 200;
        font-size: 16rpx;
    }
    @keyframes bar2 {
        0% {
            width: 0;
        }
        70% {
            width: 100%;
            opacity: 1;
        }
        90% {
            opacity: 0;
            width: 100%;
        }
        100% {
            opacity: 0;
            width: 0;
        }
    }
}
.@{prefix}-bar3-loading {
    position: relative;
    width: 150rpx;
    height: 20rpx;
    top: calc(~'50% - 10rpx');
    left: calc(~'50% - 75rpx');
    background-color: rgba(255, 255, 255, 0.2);
    &::before,
    &::after {
        content: '';
        position: absolute;
    }
    &::before {
        height: 20rpx;
        width: 0;
        background-color: currentColor;
        top: 0;
        z-index: 0;
        transform-origin: 100% 0%;
        animation: bar3 7s ease-in-out infinite;
    }
    &::after {
        content: attr(data-text);
        width: 100%;
        height: 20rpx;
        line-height: 20rpx;
        color: #fff;
        font-weight: 200;
        font-size: 16rpx;
        left: 0;
        top: 0;
    }
    @keyframes bar3 {
        0% {
            width: 0;
            left: 0;
        }
        48% {
            width: 100%;
            left: 0;
        }
        50% {
            width: 100%;
            left: 0;
        }
        52% {
            width: 100%;
            left: 0;
        }
        100% {
            width: 0;
            left: 0;
        }
    }
}
.@{prefix}-bar4-loading {
    position: relative;
    width: 100rpx;
    height: 10rpx;
    margin: 0 auto;
    text {
        position: absolute;
        width: 100%;
        height: 10rpx;
        background: currentColor;
        animation: bar4 2s infinite;
        &:nth-child(1) {
            transform: scaleX(1);
            opacity: .2;
            animation-delay: .2s;
        }
        &:nth-child(2) {
            transform: scaleX(.8);
            opacity: .4;
            animation-delay: .1s;
        }
        &:nth-child(3) {
            transform: scaleX(.4);
            opacity: .8;
        }
    }
    @keyframes bar4 {
        0%,
        100% {
            left: -50%;
        }
        50% {
            left: 50%;
        }
    }
}
.@{prefix}-eat-bean-loading {
    width: 64rpx;
    height: 64rpx;
    position: relative;
    left: -26rpx;
    margin: 0 auto;
    .dot {
        width: 16rpx;
        height: 16rpx;
        left: 64rpx;
        top: 50%;
        position: absolute;
        margin-top: -10rpx;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 25rpx 0 0 currentColor, 50rpx 0 0 currentColor, 75rpx 0 0 currentColor, 100rpx 0 0 currentColor;
        animation: eat-bean-dot .5s infinite;
    }
    &::before,
    &::after {
        content: ' ';
        width: 64rpx;
        height: 32rpx;
        background: currentColor;
        position: absolute;
        left: 0;
        top: 0;
    }
    &::before {
        border-radius: 64rpx 64rpx 0 0;
        animation: eat-bean-up .5s infinite;
    }
    &::after {
        top: 28rpx;
        border-radius: 0 0 64rpx 64rpx;
        animation: eat-bean-down .5s infinite;
    }
    @keyframes eat-bean-up {
        0%,
        100% {
            transform: rotate(0);
        }
        50% {
            transform: rotate(-40deg);
        }
    }
    @keyframes eat-bean-down {
        0%,
        100% {
            transform: rotate(0);
        }
        50% {
            transform: rotate(40deg);
        }
    }
    @keyframes eat-bean-dot {
        100% {
            left: 39rpx;
        }
    }
}
.@{prefix}-double-circle-loading {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    &::before,
    &::after {
        content: '';
        position: absolute;
        border: 4rpx solid currentColor;
        border-left-color: transparent;
        border-radius: 50%;
    }
    &::before {
        width: 100%;
        height: 100%;
        left: 0;
        top: -1rpx;
        border-bottom: 0;
        border-radius: 50%;
        animation: double-circle-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
            infinite;
    }
    &::after {
        width: 40rpx;
        height: 40rpx;
        left: calc(~'50% - 20rpx');
        top: calc(~'50% - 20rpx');
        border-right: 0;
        animation: double-circle-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
            infinite;
    }
    @keyframes double-circle-outter {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes double-circle-inner {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
}
.@{prefix}-ball-turn-loading {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 7rpx double currentColor;
    animation: ball-turn 1s linear infinite;
    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 12rpx;
        height: 12rpx;
        background: currentColor;
        border-radius: 50%;
        bottom: 0;
        right: 37rpx;
    }
    &::after {
        left: 37rpx;
        top: 0;
    }
    @keyframes ball-turn {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-block-loading {
    width: 60rpx;
    height: 60rpx;
    background-color: currentColor;
    margin: 0 auto;
    animation: rotateplane 1.2s infinite ease-in-out;
    @keyframes rotateplane {
        0% {
            transform: perspective(120rpx) rotateX(0deg) rotateY(0deg);
        }
        50% {
            transform: perspective(120rpx) rotateX(-180.1deg) rotateY(0deg);
        }
        100% {
            transform: perspective(120rpx) rotateX(-180deg) rotateY(-179.9deg);
        }
    }
}
.@{prefix}-double-bounce-loading {
    width: 60rpx;
    height: 60rpx;
    position: relative;
    margin: 0 auto;
    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0.6;
        top: 0;
        left: 0;
        animation: double-bounce 2s infinite ease-in-out;
    }
    &::after {
        animation-delay: -1s;
    }
    @keyframes double-bounce {
        0%,
        100% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
    }
}
.@{prefix}-cubemove-loading {
    width: 64rpx;
    height: 64rpx;
    position: relative;
    margin: 0 auto;
    &::before,
    &::after {
        content: '';
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 0;
        left: 0;
        background-color: currentColor;
        animation: cubemove 1.8s infinite ease-in-out;
    }
    &::after {
        animation-delay: -.9s;
    }
    @keyframes cubemove {
        25% {
            transform: translateX(42rpx) rotate(-90deg) scale(.5);
        }
        50% {
            transform: translateX(42rpx) translateY(42rpx) rotate(-179deg);
        }
        50.1% {
            transform: translateX(42rpx) translateY(42rpx) rotate(-180deg);
        }
        75% {
            transform: translateX(0) translateY(42rpx) rotate(-270deg)
                scale(.5);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
}
.@{prefix}-bounce-dot-loading {
    width: 64rpx;
    height: 64rpx;
    position: relative;
    margin: 0 auto;
    text-align: center;
    animation: bounce-dot-rotate 2s infinite linear;
    &::before,
    &::after {
        content: '';
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        background-color: currentColor;
        border-radius: 100%;
        animation: bounce-dot 2s infinite ease-in-out;
    }
    &::after {
        top: auto;
        bottom: 0;
        animation-delay: -1s;
    }
    @keyframes bounce-dot-rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes bounce-dot {
        0%,
        100% {
            transform: scale(0);
        }
        50% {
            transform: scale(1);
        }
    }
}
.@{prefix}-heartbeat-loading {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 36rpx;
    height: 36rpx;
    transform: rotate(45deg) scale(1);
    transform-origin: 50% 50%;
    animation: heartbeat 1.3s ease 0s infinite normal;
    &::before,
    &::after {
        content: '';
        position: absolute;
        background: currentColor;
    }
    &::before {
        width: 36rpx;
        height: 24rpx;
        top: 12rpx;
        left: 0;
        border-top-left-radius: 12rpx;
        border-bottom-left-radius: 12rpx;
    }
    &::after {
        width: 24rpx;
        height: 12rpx;
        top: 0;
        left: 12rpx;
        border-top-left-radius: 12rpx;
        border-top-right-radius: 12rpx;
    }
    @keyframes heartbeat {
        0% {
            transform: rotate(45deg) scale(1);
        }
        14% {
            transform: rotate(45deg) scale(1.3);
        }
        28% {
            transform: rotate(45deg) scale(1);
        }
        42% {
            transform: rotate(45deg) scale(1.3);
        }
        70% {
            transform: rotate(45deg) scale(1);
        }
    }
}
.@{prefix}-gauge-loading {
    display: inline-block;
    width: 64rpx;
    height: 32rpx;
    overflow: hidden;
    position: relative;
    text-indent: -9999rpx;
    background: currentColor;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    &::before {
        content: '';
        position: absolute;
        left: 30rpx;
        top: 5rpx;
        width: 4rpx;
        height: 27rpx;
        animation: gauge 4s infinite ease;
        background: white;
        border-radius: 2rpx;
        transform-origin: 50% 100%;
    }
    &::after {
        content: '';
        position: absolute;
        left: 25.6rpx;
        top: 25.6rpx;
        width: 12.8rpx;
        height: 12.8rpx;
        background: white;
        border-radius: 8rpx;
    }
    @keyframes gauge {
        0% {
            transform: rotate(-50deg);
        }
        10% {
            transform: rotate(20deg);
        }
        20% {
            transform: rotate(60deg);
        }
        24% {
            transform: rotate(60deg);
        }
        40% {
            transform: rotate(-20deg);
        }
        54% {
            transform: rotate(70deg);
        }
        56% {
            transform: rotate(78deg);
        }
        58% {
            transform: rotate(73deg);
        }
        60% {
            transform: rotate(75deg);
        }
        62% {
            transform: rotate(70deg);
        }
        70% {
            transform: rotate(-20deg);
        }
        80% {
            transform: rotate(20deg);
        }
        83% {
            transform: rotate(25deg);
        }
        86% {
            transform: rotate(20deg);
        }
        89% {
            transform: rotate(25deg);
        }
        100% {
            transform: rotate(-50deg);
        }
    }
}
.@{prefix}-wobblebar-loading {
    display: inline-block;
    overflow: hidden;
    width: 128rpx;
    height: 22rpx;
    position: relative;
    background: currentColor;
    border-radius: 11rpx;
    &::before {
        content: '';
        position: absolute;
        top: 4rpx;
        left: 4rpx;
        width: 21rpx;
        height: 14rpx;
        animation: wobblebar 15s infinite ease;
        background: white;
        display: block;
        border-radius: 7rpx;
    }
    @keyframes wobblebar {
        0% {
            left: 4rpx;
        }
        3% {
            left: 104rpx;
        }
        6% {
            left: 4rpx;
        }
        9% {
            left: 104rpx;
        }
        12% {
            left: 4rpx;
        }
        15% {
            left: 104rpx;
        }
        18% {
            left: 32rpx;
        }
        27% {
            left: 32rpx;
        }
        30% {
            left: 104rpx;
        }
        33% {
            left: 4rpx;
        }
        36% {
            left: 104rpx;
        }
        39% {
            left: 4rpx;
        }
        42% {
            left: 104rpx;
        }
        45% {
            left: 4rpx;
        }
        48% {
            left: 104rpx;
        }
        51% {
            left: 52rpx;
        }
        63% {
            left: 52rpx;
        }
        66% {
            left: 4rpx;
        }
        69% {
            left: 104rpx;
        }
        72% {
            left: 4rpx;
        }
        75% {
            left: 104rpx;
        }
        78% {
            left: 4rpx;
        }
        81% {
            left: 104rpx;
        }
        84% {
            left: 72rpx;
        }
        94% {
            left: 72rpx;
        }
        97% {
            left: 104rpx;
        }
    }
}
.@{prefix}-atebits-loading {
    display: inline-block;
    width: 18rpx;
    height: 18rpx;
    overflow: hidden;
    position: relative;
    background: currentColor;
    box-shadow: currentColor -24rpx -24rpx 0 0, currentColor 24rpx -24rpx 0 0,
        currentColor -24rpx 0 0 0, currentColor 24rpx 0 0 0,
        currentColor -24rpx 24rpx 0 0, currentColor 0 24rpx 0 0,
        currentColor 24rpx 24rpx 0 0;
    animation: atebits 8s infinite ease-in-out;
    transform-origin: 50% 50%;
    @keyframes atebits {
        0% {
            transform: rotate(0deg);
        }
        3% {
            transform: rotate(90deg);
        }
        10% {
            transform: rotate(90deg);
        }
        13% {
            transform: rotate(180deg);
        }
        20% {
            transform: rotate(180deg);
        }
        23% {
            transform: rotate(90deg);
        }
        30% {
            transform: rotate(90deg);
        }
        33% {
            transform: rotate(180deg);
        }
        40% {
            transform: rotate(180deg);
        }
        43% {
            transform: rotate(270deg);
        }
        50% {
            transform: rotate(270deg);
        }
        53% {
            transform: rotate(180deg);
        }
        60% {
            transform: rotate(180deg);
        }
        63% {
            transform: rotate(90deg);
        }
        70% {
            transform: rotate(90deg);
        }
        73% {
            transform: rotate(0deg);
        }
        80% {
            transform: rotate(0deg);
        }
        83% {
            transform: rotate(-90deg);
        }
        90% {
            transform: rotate(-90deg);
        }
        93% {
            transform: rotate(0deg);
        }
    }
}
.@{prefix}-whirly-loading {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    position: relative;
    transform: scale(0.5);
    &::before {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        overflow: hidden;
        background: transparent;
        border-radius: 100%;
        box-shadow: currentColor 0 26px 0 6px,
            currentColor 0.90971px 26.05079px 0 5.93333px,
            currentColor 1.82297px 26.06967px 0 5.86667px,
            currentColor 2.73865px 26.05647px 0 5.8px,
            currentColor 3.65561px 26.01104px 0 5.73333px,
            currentColor 4.57274px 25.93327px 0 5.66667px,
            currentColor 5.48887px 25.8231px 0 5.6px,
            currentColor 6.40287px 25.68049px 0 5.53333px,
            currentColor 7.31358px 25.50548px 0 5.46667px,
            currentColor 8.21985px 25.2981px 0 5.4px,
            currentColor 9.12054px 25.05847px 0 5.33333px,
            currentColor 10.01448px 24.78672px 0 5.26667px,
            currentColor 10.90054px 24.48302px 0 5.2px,
            currentColor 11.77757px 24.1476px 0 5.13333px,
            currentColor 12.64443px 23.78072px 0 5.06667px,
            currentColor 13.5px 23.38269px 0 5px,
            currentColor 14.34315px 22.95384px 0 4.93333px,
            currentColor 15.17277px 22.49455px 0 4.86667px,
            currentColor 15.98776px 22.00526px 0 4.8px,
            currentColor 16.78704px 21.48643px 0 4.73333px,
            currentColor 17.56953px 20.93855px 0 4.66667px,
            currentColor 18.33418px 20.36217px 0 4.6px,
            currentColor 19.07995px 19.75787px 0 4.53333px,
            currentColor 19.80582px 19.12626px 0 4.46667px,
            currentColor 20.5108px 18.468px 0 4.4px,
            currentColor 21.1939px 17.78379px 0 4.33333px,
            currentColor 21.85416px 17.07434px 0 4.26667px,
            currentColor 22.49067px 16.34043px 0 4.2px,
            currentColor 23.10251px 15.58284px 0 4.13333px,
            currentColor 23.68881px 14.80241px 0 4.06667px,
            currentColor 24.24871px 14px 0 4px,
            currentColor 24.7814px 13.1765px 0 3.93333px,
            currentColor 25.28607px 12.33284px 0 3.86667px,
            currentColor 25.76198px 11.46997px 0 3.8px,
            currentColor 26.2084px 10.58888px 0 3.73333px,
            currentColor 26.62462px 9.69057px 0 3.66667px,
            currentColor 27.01001px 8.77608px 0 3.6px,
            currentColor 27.36392px 7.84648px 0 3.53333px,
            currentColor 27.68577px 6.90284px 0 3.46667px,
            currentColor 27.97502px 5.94627px 0 3.4px,
            currentColor 28.23116px 4.97791px 0 3.33333px,
            currentColor 28.4537px 3.99891px 0 3.26667px,
            currentColor 28.64223px 3.01042px 0 3.2px,
            currentColor 28.79635px 2.01364px 0 3.13333px,
            currentColor 28.91571px 1.00976px 0 3.06667px,
            currentColor 29px 0px 0 3px,
            currentColor 29.04896px -1.01441px 0 2.93333px,
            currentColor 29.06237px -2.03224px 0 2.86667px,
            currentColor 29.04004px -3.05223px 0 2.8px,
            currentColor 28.98185px -4.07313px 0 2.73333px,
            currentColor 28.88769px -5.09368px 0 2.66667px,
            currentColor 28.75754px -6.1126px 0 2.6px,
            currentColor 28.59138px -7.12863px 0 2.53333px,
            currentColor 28.38926px -8.14049px 0 2.46667px,
            currentColor 28.15127px -9.1469px 0 2.4px,
            currentColor 27.87755px -10.1466px 0 2.33333px,
            currentColor 27.56827px -11.1383px 0 2.26667px,
            currentColor 27.22365px -12.12075px 0 2.2px,
            currentColor 26.84398px -13.09268px 0 2.13333px,
            currentColor 26.42956px -14.05285px 0 2.06667px,
            currentColor 25.98076px -15px 0 2px,
            currentColor 25.49798px -15.93291px 0 1.93333px,
            currentColor 24.98167px -16.85035px 0 1.86667px,
            currentColor 24.43231px -17.75111px 0 1.8px,
            currentColor 23.85046px -18.63402px 0 1.73333px,
            currentColor 23.23668px -19.49789px 0 1.66667px,
            currentColor 22.5916px -20.34157px 0 1.6px,
            currentColor 21.91589px -21.16393px 0 1.53333px,
            currentColor 21.21024px -21.96384px 0 1.46667px,
            currentColor 20.4754px -22.74023px 0 1.4px,
            currentColor 19.71215px -23.49203px 0 1.33333px,
            currentColor 18.92133px -24.2182px 0 1.26667px,
            currentColor 18.10379px -24.91772px 0 1.2px,
            currentColor 17.26042px -25.58963px 0 1.13333px,
            currentColor 16.39217px -26.23295px 0 1.06667px,
            currentColor 15.5px -26.84679px 0 1px,
            currentColor 14.58492px -27.43024px 0 0.93333px,
            currentColor 13.64796px -27.98245px 0 0.86667px,
            currentColor 12.69018px -28.50262px 0 0.8px,
            currentColor 11.7127px -28.98995px 0 0.73333px,
            currentColor 10.71663px -29.4437px 0 0.66667px,
            currentColor 9.70313px -29.86317px 0 0.6px,
            currentColor 8.67339px -30.2477px 0 0.53333px,
            currentColor 7.6286px -30.59666px 0 0.46667px,
            currentColor 6.57001px -30.90946px 0 0.4px,
            currentColor 5.49886px -31.18558px 0 0.33333px,
            currentColor 4.41643px -31.42451px 0 0.26667px,
            currentColor 3.32401px -31.6258px 0 0.2px,
            currentColor 2.22291px -31.78904px 0 0.13333px,
            currentColor 1.11446px -31.91388px 0 0.06667px,
            currentColor 0px -32px 0 0px,
            currentColor -1.11911px -32.04713px 0 -0.06667px,
            currentColor -2.24151px -32.05506px 0 -0.13333px,
            currentColor -3.36582px -32.02361px 0 -0.2px,
            currentColor -4.49065px -31.95265px 0 -0.26667px,
            currentColor -5.61462px -31.84212px 0 -0.33333px,
            currentColor -6.73634px -31.69198px 0 -0.4px,
            currentColor -7.8544px -31.50227px 0 -0.46667px,
            currentColor -8.9674px -31.27305px 0 -0.53333px,
            currentColor -10.07395px -31.00444px 0 -0.6px,
            currentColor -11.17266px -30.69663px 0 -0.66667px,
            currentColor -12.26212px -30.34982px 0 -0.73333px,
            currentColor -13.34096px -29.96429px 0 -0.8px,
            currentColor -14.4078px -29.54036px 0 -0.86667px,
            currentColor -15.46126px -29.07841px 0 -0.93333px,
            currentColor -16.5px -28.57884px 0 -1px,
            currentColor -17.52266px -28.04212px 0 -1.06667px,
            currentColor -18.52792px -27.46878px 0 -1.13333px,
            currentColor -19.51447px -26.85936px 0 -1.2px,
            currentColor -20.48101px -26.21449px 0 -1.26667px,
            currentColor -21.42625px -25.53481px 0 -1.33333px,
            currentColor -22.34896px -24.82104px 0 -1.4px,
            currentColor -23.2479px -24.07391px 0 -1.46667px,
            currentColor -24.12186px -23.29421px 0 -1.53333px,
            currentColor -24.96967px -22.48279px 0 -1.6px,
            currentColor -25.79016px -21.64052px 0 -1.66667px,
            currentColor -26.58223px -20.76831px 0 -1.73333px,
            currentColor -27.34477px -19.86714px 0 -1.8px,
            currentColor -28.07674px -18.938px 0 -1.86667px,
            currentColor -28.7771px -17.98193px 0 -1.93333px,
            currentColor -29.44486px -17px 0 -2px,
            currentColor -30.07908px -15.99333px 0 -2.06667px,
            currentColor -30.67884px -14.96307px 0 -2.13333px,
            currentColor -31.24325px -13.91039px 0 -2.2px,
            currentColor -31.7715px -12.83652px 0 -2.26667px,
            currentColor -32.26278px -11.74269px 0 -2.33333px,
            currentColor -32.71634px -10.63018px 0 -2.4px,
            currentColor -33.13149px -9.5003px 0 -2.46667px,
            currentColor -33.50755px -8.35437px 0 -2.53333px,
            currentColor -33.84391px -7.19374px 0 -2.6px,
            currentColor -34.14px -6.0198px 0 -2.66667px,
            currentColor -34.39531px -4.83395px 0 -2.73333px,
            currentColor -34.60936px -3.63759px 0 -2.8px,
            currentColor -34.78173px -2.43218px 0 -2.86667px,
            currentColor -34.91205px -1.21916px 0 -2.93333px,
            currentColor -35px 0 0 -3px,
            currentColor -35.04531px 1.22381px 0 -3.06667px,
            currentColor -35.04775px 2.45078px 0 -3.13333px,
            currentColor -35.00717px 3.6794px 0 -3.2px,
            currentColor -34.92345px 4.90817px 0 -3.26667px,
            currentColor -34.79654px 6.13557px 0 -3.33333px,
            currentColor -34.62643px 7.36007px 0 -3.4px,
            currentColor -34.41316px 8.58016px 0 -3.46667px,
            currentColor -34.15683px 9.79431px 0 -3.53333px,
            currentColor -33.85761px 11.001px 0 -3.6px,
            currentColor -33.5157px 12.19872px 0 -3.66667px,
            currentColor -33.13137px 13.38594px 0 -3.73333px,
            currentColor -32.70493px 14.56117px 0 -3.8px,
            currentColor -32.23675px 15.72291px 0 -3.86667px,
            currentColor -31.72725px 16.86968px 0 -3.93333px,
            currentColor -31.17691px 18px 0 -4px,
            currentColor -30.58627px 19.11242px 0 -4.06667px,
            currentColor -29.95589px 20.2055px 0 -4.13333px,
            currentColor -29.28642px 21.27783px 0 -4.2px,
            currentColor -28.57852px 22.32799px 0 -4.26667px,
            currentColor -27.83295px 23.35462px 0 -4.33333px,
            currentColor -27.05047px 24.35635px 0 -4.4px,
            currentColor -26.23192px 25.33188px 0 -4.46667px,
            currentColor -25.37819px 26.27988px 0 -4.53333px,
            currentColor -24.49018px 27.1991px 0 -4.6px,
            currentColor -23.56888px 28.0883px 0 -4.66667px,
            currentColor -22.6153px 28.94626px 0 -4.73333px,
            currentColor -21.6305px 29.77183px 0 -4.8px,
            currentColor -20.61558px 30.56385px 0 -4.86667px,
            currentColor -19.57168px 31.32124px 0 -4.93333px,
            currentColor -18.5px 32.04294px 0 -5px,
            currentColor -17.40175px 32.72792px 0 -5.06667px,
            currentColor -16.27818px 33.37522px 0 -5.13333px,
            currentColor -15.1306px 33.98389px 0 -5.2px,
            currentColor -13.96034px 34.55305px 0 -5.26667px,
            currentColor -12.76875px 35.08186px 0 -5.33333px,
            currentColor -11.55724px 35.56951px 0 -5.4px,
            currentColor -10.32721px 36.01527px 0 -5.46667px,
            currentColor -9.08014px 36.41843px 0 -5.53333px,
            currentColor -7.81748px 36.77835px 0 -5.6px,
            currentColor -6.54075px 37.09443px 0 -5.66667px,
            currentColor -5.25147px 37.36612px 0 -5.73333px,
            currentColor -3.95118px 37.59293px 0 -5.8px,
            currentColor -2.64145px 37.77443px 0 -5.86667px,
            currentColor -1.32385px 37.91023px 0 -5.93333px;
        animation: whirly 1.25s infinite linear;
        transform-origin: 50% 50%;
    }
    @keyframes whirly {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
.@{prefix}-dots-loading {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 7rpx;
    height: 7rpx;
    background: transparent;
    border-radius: 100%;
    box-shadow: var(--orange) -14rpx -14rpx 0 7rpx,
        var(--yellow) 14rpx -14rpx 0 7rpx, var(--green) 14rpx 14rpx 0 7rpx,
        var(--blue) -14rpx 14rpx 0 7rpx;
    animation: dots 5s infinite ease-in-out;
    transform-origin: 50% 50%;
    @keyframes dots {
        0% {
            box-shadow: var(--orange) -14rpx -14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) -14rpx 14rpx 0 7rpx;
        }
        8.33% {
            box-shadow: var(--orange) 14rpx -14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) -14rpx 14rpx 0 7rpx;
        }
        16.67% {
            box-shadow: var(--orange) 14rpx 14rpx 0 7rpx,
                var(--yellow) 14rpx 14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) -14rpx 14rpx 0 7rpx;
        }
        25% {
            box-shadow: var(--orange) -14rpx 14rpx 0 7rpx,
                var(--yellow) -14rpx 14rpx 0 7rpx,
                var(--green) -14rpx 14rpx 0 7rpx,
                var(--blue) -14rpx 14rpx 0 7rpx;
        }
        33.33% {
            box-shadow: var(--orange) -14rpx -14rpx 0 7rpx,
                var(--yellow) -14rpx 14rpx 0 7rpx,
                var(--green) -14rpx -14rpx 0 7rpx,
                var(--blue) -14rpx -14rpx 0 7rpx;
        }
        41.67% {
            box-shadow: var(--orange) 14rpx -14rpx 0 7rpx,
                var(--yellow) -14rpx 14rpx 0 7rpx,
                var(--green) -14rpx -14rpx 0 7rpx,
                var(--blue) 14rpx -14rpx 0 7rpx;
        }
        50% {
            box-shadow: var(--orange) 14rpx 14rpx 0 7rpx,
                var(--yellow) -14rpx 14rpx 0 7rpx,
                var(--green) -14rpx -14rpx 0 7rpx,
                var(--blue) 14rpx -14rpx 0 7rpx;
        }
        58.33% {
            box-shadow: var(--orange) -14rpx 14rpx 0 7rpx,
                var(--yellow) -14rpx 14rpx 0 7rpx,
                var(--green) -14rpx -14rpx 0 7rpx,
                var(--blue) 14rpx -14rpx 0 7rpx;
        }
        66.67% {
            box-shadow: var(--orange) -14rpx -14rpx 0 7rpx,
                var(--yellow) -14rpx -14rpx 0 7rpx,
                var(--green) -14rpx -14rpx 0 7rpx,
                var(--blue) 14rpx -14rpx 0 7rpx;
        }
        75% {
            box-shadow: var(--orange) 14rpx -14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx -14rpx 0 7rpx,
                var(--blue) 14rpx -14rpx 0 7rpx;
        }
        83.33% {
            box-shadow: var(--orange) 14rpx 14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) 14rpx 14rpx 0 7rpx;
        }
        91.67% {
            box-shadow: var(--orange) -14rpx 14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) -14rpx 14rpx 0 7rpx;
        }
        100% {
            box-shadow: var(--orange) -14rpx -14rpx 0 7rpx,
                var(--yellow) 14rpx -14rpx 0 7rpx,
                var(--green) 14rpx 14rpx 0 7rpx, var(--blue) -14rpx 14rpx 0 7rpx;
        }
    }
}
.@{prefix}-dcirclesots-loading {
    position: relative;
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    background: var(--yellow);
    opacity: 0.9;
    border-radius: 100%;
    animation: circles 3s infinite ease-in-out;
    transform-origin: 50% 100%;
    &::before {
        content: '';
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 36rpx;
        left: -22rpx;
        background: var(--orange);
        opacity: 0.6;
        border-radius: 100%;
    }
    &::after {
        content: '';
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 36rpx;
        left: 22rpx;
        background: var(--red);
        opacity: 0.4;
        border-radius: 100%;
    }
    @keyframes circles {
        0% {
            transform: rotate(-720deg);
        }
        50% {
            transform: rotate(720deg);
        }
    }
}
.@{prefix}-plus-ball-loading {
    overflow: hidden;
    position: relative;
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto;
    background-color: var(--orange);
    border-radius: 32rpx;
    transform: rotateZ(90deg);
    transform-origin: 50% 50%;
    animation: plus-ball-background 3s infinite ease-in-out;
    &::before {
        content: '';
        background-color: var(--yellow);
        border-radius: 32rpx 0 0 32rpx;
        width: 50%;
        height: 100%;
        position: absolute;
        right: 50%;
        top: 0;
        transform-origin: 100% 50%;
        animation: plus-ball--bottom 3s infinite linear;
    }
    &::after {
        content: '';
        background-color: var(--orange);
        border-radius: 32rpx 0 0 32rpx;
        position: absolute;
        right: 50%;
        top: 0;
        width: 50%;
        height: 100%;
        transform-origin: 100% 50%;
        animation: plus-ball-top 3s infinite linear;
    }
    @keyframes plus-ball-top {
        2.5% {
            background-color: var(--orange);
            transform: rotateY(0deg);
            animation-timing-function: ease-in;
        }
        13.75% {
            background-color: var(--red);
            transform: rotateY(90deg);
            animation-timing-function: step-start;
        }
        13.76% {
            background-color: var(--yellow);
            transform: rotateY(90deg);
            animation-timing-function: ease-out;
        }
        25% {
            background-color: var(--fusion-yellow);
            transform: rotateY(180deg);
        }
        27.5% {
            background-color: var(--fusion-yellow);
            transform: rotateY(180deg);
            animation-timing-function: ease-in;
        }
        41.25% {
            background-color: var(--yellow);
            transform: rotateY(90deg);
            animation-timing-function: step-start;
        }
        41.26% {
            background-color: var(--green);
            transform: rotateY(90deg);
            animation-timing-function: ease-out;
        }
        50% {
            background-color: var(--fusion-green);
            transform: rotateY(0deg);
        }
        52.5% {
            background-color: var(--fusion-green);
            transform: rotateY(0deg);
            animation-timing-function: ease-in;
        }
        63.75% {
            background-color: var(--green);
            transform: rotateY(90deg);
            animation-timing-function: step-start;
        }
        63.76% {
            background-color: var(--blue);
            transform: rotateY(90deg);
            animation-timing-function: ease-out;
        }
        75% {
            background-color: var(--fusion-blue);
            transform: rotateY(180deg);
        }
        77.5% {
            background-color: var(--fusion-blue);
            transform: rotateY(180deg);
            animation-timing-function: ease-in;
        }
        91.25% {
            background-color: var(--blue);
            transform: rotateY(90deg);
            animation-timing-function: step-start;
        }
        91.26% {
            background-color: var(--red);
            transform: rotateY(90deg);
            animation-timing-function: ease-in;
        }
        100% {
            background-color: var(--orange);
            transform: rotateY(0deg);
            animation-timing-function: step-start;
        }
    }
    @keyframes plus-ball--bottom {
        0% {
            background-color: var(--fusion-yellow);
            animation-timing-function: step-start;
        }
        50% {
            background-color: var(--fusion-yellow);
            animation-timing-function: step-start;
        }
        75% {
            background-color: var(--fusion-blue);
            animation-timing-function: step-start;
        }
        100% {
            background-color: var(--fusion-blue);
            animation-timing-function: step-start;
        }
    }
    @keyframes plus-ball-background {
        0% {
            background-color: var(--orange);
            transform: rotateZ(180deg);
        }
        25% {
            background-color: var(--orange);
            transform: rotateZ(180deg);
            animation-timing-function: step-start;
        }
        27.5% {
            background-color: var(--fusion-green);
            transform: rotateZ(90deg);
        }
        50% {
            background-color: var(--fusion-green);
            transform: rotateZ(90deg);
            animation-timing-function: step-start;
        }
        52.5% {
            background-color: var(--fusion-green);
            transform: rotateZ(0deg);
        }
        75% {
            background-color: var(--fusion-green);
            transform: rotateZ(0deg);
            animation-timing-function: step-start;
        }
        77.5% {
            background-color: var(--orange);
            transform: rotateZ(270deg);
        }
        100% {
            background-color: var(--orange);
            transform: rotateZ(270deg);
            animation-timing-function: step-start;
        }
    }
}
.@{prefix}-ball-clip-rotate-loading {
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;
    border-radius: 100%;
    animation-fill-mode: both;
    border: 4rpx solid currentColor;
    border-bottom-color: transparent;
    background-color: transparent;
    animation: ball-clip-rotate 0.75s 0s linear infinite;
    @keyframes ball-clip-rotate {
        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }
}
.@{prefix}-ball-clip-rotate-pulse-loading {
    position: relative;
    width: 64rpx;
    margin: 0 auto;
    transform: translateY(-30rpx);
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 100%;
        animation-fill-mode: both;
    }
    &::before {
        background: currentColor;
        height: 32rpx;
        width: 32rpx;
        top: 18rpx;
        left: 18rpx;
        animation: ball-clip-rotate-pulse-scale 1s 0s
            cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    }
    &::after {
        position: absolute;
        border: 4rpx solid currentColor;
        width: 60rpx;
        height: 60rpx;
        background: transparent;
        border: 4rpx solid;
        border-color: currentColor transparent currentColor transparent;
        animation: ball-clip-rotate-pulse-rotate 1s 0s
            cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
        animation-duration: 1s;
    }
    @keyframes ball-clip-rotate-pulse-scale {
        30% {
            transform: scale(0.3);
        }
        100% {
            transform: scale(1);
        }
    }
    @keyframes ball-clip-rotate-pulse-rotate {
        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }
}
.@{prefix}-ball-clip-rotate-multiple-loading {
    position: relative;
    width: 64rpx;
    margin: 0 auto;
    &::before,
    &::after {
        content: '';
        animation-fill-mode: both;
        position: absolute;
        left: 0;
        top: 0;
        border: 4rpx solid currentColor;
        border-bottom-color: transparent;
        border-top-color: transparent;
        border-radius: 100%;
        height: 64rpx;
        width: 64rpx;
        animation: ball-clip-rotate-multiple-rotate 1s 0s ease-in-out infinite;
    }
    &::after {
        top: 20rpx;
        left: 20rpx;
        width: 24rpx;
        height: 24rpx;
        animation-duration: 0.5s;
        border-color: currentColor transparent currentColor transparent;
        animation-direction: reverse;
    }
    @keyframes ball-clip-rotate-multiple-rotate {
        0% {
            transform: rotate(0deg) scale(1);
        }
        50% {
            transform: rotate(180deg) scale(0.6);
        }
        100% {
            transform: rotate(360deg) scale(1);
        }
    }
}
.@{prefix}-semi-circle-loading {
    position: relative;
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto;
    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        border-width: 0;
        border-radius: 100%;
        animation: semi-circle 0.6s 0s infinite linear;
        background-image: linear-gradient(
            transparent 0%,
            transparent 70%,
            currentColor 30%,
            currentColor 100%
        );
    }
    @keyframes semi-circle {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(180deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
}
